<template>
	<div id="app">
		<div class="tksp">
			<span class="heiz"><span class="pil">|</span>&emsp;操作员管理</span>
			<span class="ssp">首页&nbsp;操作员管理&nbsp;<span class="tun">操作员管理</span></span>
		</div>
		<div class="panel ">
			<div class="cell margin">
				<label>登录名：</label>
				<input placeholder="请输入登录名" value="" name="userName" validate="userName" id="jsUserName" />
				<small class="tip txt-danger"></small>
				<br /><br />
				<label>真实姓名：</label>
				<input placeholder="请输入真实姓名" value="" name="realName" validate="realName" id="jsRealName" />
				<small class="tip txt-danger"></small>
				<br /><br />
				<label>部门：</label>
				<input placeholder="请输入部门名称" value="" name="depart" validate="depart" id="jsDepart" />
				<small class="tip txt-danger"></small>
				<br /><br />
				<label>职务：</label>
				<input placeholder="请输入职务名称" value="" name="job" validate="job" id="jsJob" />
				<small class="tip txt-danger"></small>
				<br /><br />
				<label>手机号码：</label>
				<input placeholder="请输入常用手机号" validate="tel" name="tel" value="" id="jsTel" />
				<small class="tip txt-danger"></small>
				<br /><br />
				<label>电子邮箱：</label>
				<input placeholder="请输入常用电子邮箱" validate="email" name="email" value="" id="jsEmail" />
				<small class="tip txt-danger"></small>
				<br /><br />
				<label>密码：</label>
				<!-- <div class="control cell-pw"> -->
				<input type="password" name="password" data-name="password" placeholder="请设置密码"
					data-check="checkPwdHandler" id="jsPassWord" />
				<!-- </div> -->
				<br /><br />
				<label>确认密码：</label>
				<!-- <div class="control cell-pw"> -->
				<input type="password" name="password" data-name="password" placeholder="请再确认一次"
					data-check="checkPwdHandler2" id="jsPassWord2" />
				<!-- </div> -->
				<br /><br />

			</div>
		</div>
		<div class="quan">

			<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">所有权限
			</el-checkbox>
			<div style="margin: 15px 0;"></div>
			<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
				<!-- <el-checkbox-group v-model="checkedCitiesss" @change="handleCheckedCitiesChange"> -->
				<div class="ell">
					<el-checkbox v-for="city in cities" :label="city" :key="city" style="white-space: pre-line;">
						{{city}}
					</el-checkbox>
				</div>
				<!-- </el-checkbox-group> -->
			</el-checkbox-group>
		</div>
		<div class="dxyzm">
			<label>短信验证码：</label>
			<input placeholder="请输入短信验证码" value="" name="userName" validate="userName" id="jsUserName" />
			<small class="tip txt-danger"></small>
				<button class="hqyzm" type="">获取验证码</button>
			<br />
			<label></label>
			<span class="info">新&emsp;建</span>
			<span class="bb">放&emsp;弃</span>
		</div>
		<div class="footer">- 壹钱包商户服务平台 -</div>

	</div>
</template>

<script>
	const cityOptions = ['查询', '操作', '审核', '账户资料', '代发转入', '退款审核', '商户资料', '退款', '提前结算审核', '收支明细', '提前结算', '代发审核', '收单记录',
		'批量代发', '批量退款审核', '收单记录汇总', '批量代收'
	];
	export default {
		data() {
			return {
				checkAll: false,
				checkedCities: ['', ''],
				cities: cityOptions,
				isIndeterminate: true
			};
		},
		methods: {
			handleCheckAllChange(val) {
				this.checkedCities = val ? cityOptions : [];
				this.isIndeterminate = false;
			},
			handleCheckedCitiesChange(value) {
				let checkedCount = value.length;
				this.checkAll = checkedCount === this.cities.length;
				this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
			}
		}
	};
</script>

<style scoped="scoped">
	* {
		margin: 0;
		padding: 0;
	}
	.hqyzm{margin-left: 10px;
		width: 80px;
		height: 30px;
	
	}
	.footer {
		width: 98%;
		text-align: center;
		margin-top: 80px;
		font-size: 10px;
		color: #999999;
	}
	

	.info {
		margin-top: 20px;
		display: inline-block;
		width: 86px;
		height: 34px;
		text-align: center;
		line-height: 34px;
		color: #ffe7e7;
		background-color: #0064c1;
	}

	.bb {
		margin-top: 20px;
		margin-left: 10px;
		display: inline-block;
		width: 85px;
		height: 33px;
		text-align: center;
		line-height: 34px;
		border: 1px solid #0064c1;
		color: #0064c1;
	}


	.suo {
		width: 13px;
		height: 13px;
	}

	.quan {
		margin-top: 10px;
		margin-left: 100px;
	}

	.ell {
		display: inline-block;
		text-align: center;
		margin-top: 30px;
		width: 417px;
		height: 486px;
		border: 1px solid #333333;
	}

	label.el-checkbox {
		margin-top: 20px;
		text-align: left;
		width: 110px;
	}

	label {
		display: inline-block;
		width: 100px;
		text-align: right;
		color: #333;
		font-size: 13px;
	}

	.panel input {
		display: inline-block;
		width: 272px;
		height: 36px;
	}

	.dxyzm {
		margin-top: 20px;
	}

	.dxyzm input {
		display: inline-block;
		width: 272px;
		height: 36px;
	}

	.panel {
		margin-top: 20px;
	}

	#app {
		width: 100%;
		height: 100%;

	}

	.tksp {
		width: 98%;
		height: 68px;
		line-height: 68px;
		margin-left: 1%;
		border-bottom: 1px solid #dddddd;
	}

	.heiz {
		display: inline-block;
		float: left;
		font-size: 20px;
	}

	.pil {
		color: #1d85d7;
	}

	.ssp {
		display: inline-block;
		float: right;
		font-size: 13px;
		margin-right: 1%;
		color: #666666;
	}

	.tun {
		font-size: 13px;
		color: #666666;
		font-weight: 600;
	}
</style>
